<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
		<title>Kanakku - Bootstrap Admin HTML Template</title>
		
		<!-- Favicon -->
		<link rel="shortcut icon" href="assets/img/favicon.png">

		<link rel="stylesheet" href="assets/css/element.css">
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="assets/css/bootstrap.min.css">
		
		<!-- Fontawesome CSS -->
		<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
		<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
		
		<!-- Main CSS -->
		<link rel="stylesheet" href="assets/css/style.css">



		<script src="assets/js/vue.js"></script>
		<script src="assets/js/axios.js"></script>
		<script src="assets/js/element.js"></script>
		<script src="assets/util/request.js"></script>
		<script src="assets/util/jsencrypt.js"></script>
		<script src="assets/util/localStorageUtil.js"></script>
		
		<!--[if lt IE 9]>
			<script src="assets/js/html5shiv.min.js"></script>
			<script src="assets/js/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
	
		<!-- Main Wrapper -->
        <div class="main-wrapper login-body" id="forget">
            <div class="login-wrapper">
            	<div class="container">
					<img class="img-fluid logo-dark mb-2" src="assets/img/logo.png" alt="Logo">
				
                	<div class="loginbox"> 
                        <div class="login-right">
							<div class="login-right-wrap">
								<div v-show="enterEmail">
									<h1>忘记密码?</h1>
									<p class="account-subtitle" style="color: #bfbfbf">请输入您的邮箱，如忘记请联系管理员。</p>
									<!-- Form -->
									<el-form ref="emailForm" :rules="rules" :model="forgetForm" >
										<el-form-item prop="email">
											<el-input type="email" placeholder="请输入邮箱" v-model="forgetForm.email"></el-input>
										</el-form-item>
										<div class="form-group mb-0">
											<button class="btn btn-lg btn-block btn-primary"  type="button" v-on:click="getEmailForgetCode">发送验证</button>
										</div>
									</el-form>
									<!-- /Form -->
									<div class="text-center dont-have">记得你的密码? <a href="login.html" class="forgot-link">登录</a></div>
								</div>

								<div v-show="enterPassword">
									<h1>重置密码</h1>
									<p class="account-subtitle" style="color: #bfbfbf">已将验证码发送到邮箱，请查收。</p>
									<!-- Form -->
									<el-form ref="passwordForm" :model="forgetForm" :rules="rules">
										<el-form-item prop="password">
											<el-input type="password" placeholder="请输入新密码" v-model="forgetForm.password"></el-input>
										</el-form-item>

										<el-form-item prop="confirmPassword">
											<el-input type="password" placeholder="请确认新密码" v-model="forgetForm.confirmPassword"></el-input>
										</el-form-item>

										<el-form-item prop="code">

											<el-input
													v-model="forgetForm.code"
													placeholder="验证码"
													@keyup.enter.native="submit">
												<el-button slot="append" v-show="codeShow" v-on:click="getEmailForgetCode">发送验证码</el-button>
												<el-button slot="append" v-show="!codeShow" v-on:click="getEmailForgetCode"  disabled="disabled">{{count}}s后重试</el-button>

											</el-input>

										</el-form-item>

										<div class="form-group mb-0">
											<button class="btn btn-lg btn-block btn-primary" type="button" v-on:click="submit">重置密码</button>
										</div>
									</el-form>
									<!-- /Form -->
									<div class="text-center dont-have">记得你的密码? <a href="login.html" class="forgot-link">登录</a></div>
								</div>

							</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
		<!-- /Main Wrapper -->
		
		<!-- jQuery -->
        <script src="assets/js/jquery-3.5.1.min.js"></script>
		
		<!-- Bootstrap Core JS -->
        <script src="assets/js/popper.min.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
		
		<!-- Feather Icon JS -->
		<script src="assets/js/feather.min.js"></script>
		
		<!-- Custom JS -->
		<script src="assets/js/script.js"></script>

	</body>

<script>
	let storage = new Storage();

	var forget = new Vue({
		el: '#forget',
		data() {
			const checkEmail = (rule,value,callback) =>{
				const pattern = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
				if(!pattern.test(value)){
					callback(new Error("请输入格式正确的邮箱"))
				}else{
					callback();
				}

			};

			const checkConfirmPassword = (rule,value,callback) =>{
				if(value==='' || value === null){
					callback(new Error("确认密码不能为空"));
				}
				if(!(this.forgetForm.password===this.forgetForm.confirmPassword)){
					callback(new Error("两次密码必须相同，且不能为空，请检查重新输入"))
				}else{
					callback();
				}

			};

			return{
				encrypt : null,
				enterEmail: true,
				enterPassword: false,
				codeShow:true,
				count:"",
				timer: null,
				forgetForm: {
					email:"",
					password:"",
					confirmPassword:"",
					code:"",
				},

				rules: {
					email: [
						{validator: checkEmail,trigger: 'change'}
					],
					password: [
						{required: true,message:"请输入密码",trigger: 'blur'},
						{min: 6,max: 30,message: '密码长度6-30位',trigger: 'blur'},
					],
					confirmPassword: [
						{validator: checkConfirmPassword,trigger: 'change'}
					],
					code: [
						{required: true,message:"验证码不能为空",trigger: 'blur'}
					]
				}
			}
		},
		methods:{
			submit(){
				this.$refs['passwordForm'].validate(valid =>{
					if(valid){
						this.initPublicKey();
						service({
							method: 'post',
							url: '/user/forgetPassword',
							data:{
								email: this.forgetForm.email,
								newPassword: this.encrypt.encrypt(this.forgetForm.password),
								code: this.forgetForm.code
							}
						}).then(response=>{
							if(response.data){
								thispoint.$confirm('更改成功！是否跳转到登录页？', '修改密码成功', {
									confirmButtonText: '是',
									cancelButtonText: '否',
									type: 'success ',
									center: true
								}).then(() => {
									window.location.href="/login.html"
								}).catch(()=>{
									thispoint.$message({
										type: 'info',
										message: '取消跳转登录'
									})
								})
							}
						})
					}
				})
			},
			//发送忘记密码验证码
			getEmailForgetCode() {
				let validateList = [];
				this.$refs['emailForm'].validateField(['email'],(message)=>{
					validateList.push(message)
				});
				if(validateList.every(item =>item ==='')){
					service({
						method: 'post',
						url: '/user/email/forgetPassword',
						data:{
							email: this.forgetForm.email
						}
					}).then(response=>{
						console.log(response.data)
						if(response.data){
							this.$message({message:"验证码已发送,请您查看邮箱",type: "success"})
							//点击获取验证码
							const TIME_COUNT = 60;  //倒计时60秒
							if (!this.timer) {
								this.count = TIME_COUNT;
								this.codeShow = false;
								this.timer = setInterval(() => {
									if (this.count > 0 && this.count <= TIME_COUNT) {
										this.count--;
									} else {
										this.codeShow = true;
										clearInterval(this.timer);
										this.timer = null;
									}
								}, 1000);
							}
							this.enterEmail = false;
							this.enterPassword = true;
						}
					})
				}
			},
			initPublicKey(){
				this.encrypt = new JSEncrypt();
				this.encrypt.setPublicKey(storage.getItem("publicKey"))
			}

		},

		created(){
			//请求公钥
			getPublicKey();
		},
		mounted() {
			intThisPoint(this);
		}
	})
</script>
</html>